<%@ page language="java" import="cn.waqwb.connDB,java.util.*" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>

<% ArrayList<String[]> list = connDB.index_4();
    ArrayList<String[]> list2 = connDB.index_5();
%>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>ECharts supermarket</title>
    <link href="./css/style.css" type='text/css' rel="stylesheet"/>
    <link rel="shortcut icon" href="#"/>
    <script src="./js/echarts.js"></script>
    <script src="./js/echarts.min.js"></script>
    <script src="./js/style/macarons.js"></script>
    <script src="./js/style/roma.js"></script>
    <script src="./js/style/vintage.js"></script>
</head>
<body>
<div class='header'>
    <p>ECharts supermarket</p>
</div>
<div class="content">
    <div class="nav">
        <ul>
            <li><a href="./index.jsp">总商品品类成交量对比</a></li>
            <li><a href="./SMindex1.jsp">饮品成交量对比</a></li>
            <li><a href="./SMindex2.jsp">各省会员人数</a></li>
            <li><a href="./SMindex3.jsp">男女购买商品对比</a></li>
            <li class="current"><a href="#">商品购买关系</a></li>

        </ul>
    </div>
    <div class="container">
        <div class="title">超市商品购买关系</div>
        <div class="show">
            <div class='chart-type'></div>
            <div id="main" style="width:700px;height:500px"></div>
        </div>
    </div>
</div>
<script>
    // 获取 HTML 页面中 id 为'main' 的 DOM 元素，作为 ECharts 图表的容器
    var supermarketContainer = document.getElementById('main');

    // 基于准备好的 DOM，初始化 ECharts 实例
    var myChart = echarts.init(supermarketContainer);

    // 以下是 JSP 代码部分，在服务器端执行，用于处理数据
    <%
        // 创建一个新的 ArrayList list11 用于存储数据
        ArrayList list11 = new ArrayList();
        // 遍历名为 list 的集合（假设是从服务器端获取的原始数据集合）
        for (int i = 0; i < list.size(); i++) {
            // 将 list 中每个元素的第一个和第二个值添加到 list11 中
            list11.add(list.get(i)[0]);
            list11.add(list.get(i)[1]);
        }
        // 在服务器端控制台打印 list11 用于调试
        System.out.println(list11);
        // 使用 LinkedHashSet 去除 list11 中的重复元素，LinkedHashSet 可以保持元素的插入顺序
        LinkedHashSet<Integer> hashSet = new LinkedHashSet(list11);
        // 将去重后的 LinkedHashSet 转换为 ArrayList
        ArrayList<Integer> list1 = new ArrayList(hashSet);
        // 注释掉的代码，原本用于在服务器端控制台打印 list1，可根据需要取消注释
        //System.out.println(list1);
    %>

    // 定义一个空数组 nodes，用于存储图表中的节点数据
    var nodes = [

    ];

    // 再次使用 JSP 代码，根据 list1 的数据生成节点数据并添加到 nodes 数组中
    <%
        for (int i = 0; i < list1.size(); i++) {
    %>
    // 向 nodes 数组中添加一个对象，包含节点的名称、id、符号大小和符号类型
    nodes.push({
        name: '<%=list2.get(i)[1]%>',
        id: '<%=list2.get(i)[0]%>',
        symbolSize: 20,
        symbol: 'circle'
    });
    <%
        }
    %>

    // 在浏览器控制台打印 nodes 数组，用于调试查看节点数据
    console.log(nodes);

    // 定义一个空数组 links，用于存储图表中的边数据
    var links = [

    ];

    // JSP 代码，根据原始 list 数据生成边数据并添加到 links 数组中
    <%
        for (int i = 0; i < list.size(); i++) {
            // 获取 list 中每个元素的第三个值，并转换为字符串
            String temp = list.get(i)[2];
            // 将字符串转换为 double 类型
            double temp1 = Double.parseDouble(temp);
            // 将数值乘以 10 用于设置边的宽度
            double temp2 = temp1 * 10;
            // 将数值乘以 100 并格式化为带有两位小数的字符串，用于显示百分比
            temp1 = temp1 * 100;
            temp = String.format("%.2f", temp1).toString() + "%";
            // 在服务器端控制台打印格式化后的百分比字符串，用于调试
            //System.out.println(temp);
    %>
    // 向 links 数组中添加一个对象，包含边的源节点、目标节点、边的样式宽度和关系名称
    links.push({
        source: '<%=list.get(i)[0]%>',
        target: '<%=list.get(i)[1]%>',
        lineStyle: {
            width: '<%=temp2%>'
        },
        relation: {
            name: '<%=temp%>'
        }
    });
    <%
        }
    %>

    // 在浏览器控制台打印 links 数组，用于调试查看边数据
    console.log(links);

    // 定义 ECharts 图表的配置选项
    var option = {
        // 图表标题配置
        title: {
            // 标题文本内容，表明图表展示的是超市商品购买关系图
            text: '超市商品购买关系图',
            // 标题在水平方向上的位置设置为左侧
            left: 'left',
            // 原本有设置标题距离顶部的距离，当前被注释掉了，可按需设置，如 top: 20
            //top: 20,
            // 标题文本的样式设置，当前颜色设置被注释掉了，可按需设置，如 color: '#ccc'
            textStyle: {
                //color: '#ccc'
            }
        },
        // 提示框配置
        tooltip: {
            // 提示框的触发类型为 'item'，即鼠标悬停在数据项上时触发
            trigger: 'item'
            // 原本有提示框的格式化函数，当前被注释掉了，可按需设置，如 formatter: "{a} <br/>{b} : {c} ({d}%)"
            //formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        // 视觉映射组件配置
        visualMap: {
            // 不显示视觉映射组件
            show: false,
            // 数据的最小值，用于定义视觉映射的范围
            min: 80,
            // 数据的最大值，用于定义视觉映射的范围
            max: 600,
            // 定义在指定范围内的视觉映射效果，当前颜色亮度设置被注释掉了，可按需设置，如 colorLightness: [0, 1]
            inRange: {
                //colorLightness: [0, 1]
            }
        },
        // 直角坐标系内绘图网格配置
        grid: {
            // 是否包含坐标轴的标签，设置为 true 表示包含
            containLabel: true
        },
        // 图表系列配置，这里是一个图关系图系列
        series: [
            {
                // 图表类型为图关系图
                type: 'graph',
                // 布局方式为 force（力导向布局）
                layout: 'force',
                // 节点数据，使用之前定义的 nodes 数组
                nodes: nodes,
                // 边数据，使用之前定义的 links 数组
                links: links,
                // 力导向布局的相关配置
                force: {
                    // 节点之间的斥力
                    repulsion: 100,
                    // 重力
                    gravity: 0.03,
                    // 边的长度
                    edgeLength: 80,
                    // 是否开启布局动画
                    layoutAnimation: false
                },
                // 数据项（节点）的样式配置
                itemStyle: {
                    normal: {
                        // 节点的透明度
                        opacity: 0.9,
                        // 节点的颜色配置函数，根据数据项的索引从颜色列表中选择颜色
                        color: function (params) {
                            // 颜色列表，包含多种颜色
                            var colorList = [
                                '#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B',
                                '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
                                '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'
                            ];
                            // 根据数据项的索引返回对应的颜色
                            return colorList[params.dataIndex];
                        }
                    }
                },
                // 边的样式配置
                lineStyle: {
                    normal: {
                        // 是否显示边
                        show: true,
                        // 边的颜色设置为目标节点的颜色（这里 'target' 可能是个特殊值或拼写错误，需根据实际情况调整）
                        color: 'target',
                        // 边的宽度
                        width: 5
                    }
                },
                // 节点标签配置
                label: {
                    // 是否显示节点标签
                    show: true,
                    // 标签的位置设置为节点下方
                    position: "bottom",
                    // 标签与节点的距离
                    distance: 5,
                    // 标签的字体大小
                    fontSize: 10,
                    // 标签文本的对齐方式为居中
                    align: "center"
                },
                // 多条边时，自动计算曲率
                autoCurveness: 0.01,
                // 边的标签配置
                edgeLabel: {
                    // 是否显示边的标签
                    show: true,
                    // 边标签的位置设置为边的中间
                    position: "middle",
                    // 边标签的字体大小
                    fontSize: 10,
                    // 边标签的格式化函数，返回边的关系名称
                    formatter: (params) => {
                        return params.data.relation.name;
                    }
                },
                // 边两端的符号类型，这里是圆形和箭头
                edgeSymbol: ["circle", "arrow"]
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表
    // 如果 option 存在（不为 null），则调用 myChart 的 setOption 方法将配置应用到图表上进行显示
    option && myChart.setOption(option);

    // 原本有窗口大小改变时的处理函数，当前被注释掉了，可按需启用
    //window.onresize = function () {
    //    resizesupermarketContainer();
    //    myChart.resize();
    //}
</script>
</body>
</html>